<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>糯米听书</title>
    <link href="/NmBook/static/img/nuomi.ico" rel="shortcut icon">
    <link rel="stylesheet" href="./component/element-ui/index.css">
    <link rel="stylesheet" href="./component/common/css/nmMain.css">
</head>
<body class="text-shadow">
<div id="app">
    <div class="top-bar bg-white">
        <div class="top-logo" style="padding-left: calc( 50% - 590px );">
            <img width="50px" height="50px" src="/NmBook/static/img/nuoMi.png" />
            <div style="padding-left: 10px;">
                <span style="color:#ff9c0a;">糯 </span><span class="text-blue">米 </span><span style="color: white;text-stroke: 1px black;">听 书</span>
            </div>
            <div class="v-flex v-c-center" style="padding-left: 50px;line-height: 60px;">
                <el-input
                        placeholder="请输入作品名称搜索"
                        prefix-icon="el-icon-search"
                        v-model="title"
                        @keyup.enter.native="getBookList(0)">
                </el-input>
            </div>
        </div>
        <div class="v-flex v-c-center" style="padding-right: calc( 50% - 590px );">
            <el-avatar size="medium" :src="'/NmBook/static/img/'+(user?'nuoMi.png':'unknow.png')"></el-avatar>
            <div class=" text-shadow text-blue" style="padding-left: 15px;">{{ user? (user.nickName+'['+getUserType(user.type)+']'):'游客' }}</div>
            <div class="text-shadow text-red" style="padding-left: 15px;" @click="showFed=true;">意见反馈</div>
        </div>
    </div>

    <div class="tab-list" style="padding-left: calc( 50% - 590px );">
        <div @click="changeTab(index,item)" class="tab-item" :class="(selType==index ? 'tab-sel':'') + ( item.groupName == '搞点黄色'?' text-yellow':'')" v-for="(item ,index ) in typeList" :key="index" >{{item.groupName}}</div>
    </div>

    <div style="width: 1180px;margin-left: calc( 50% - 590px );">
        <div class="l-block-top" style="width: 813px;margin:10px 5px;">
            <div class="bg-white padding-10" style="min-height: calc( 100vh - 160px );margin-left: 0;" >
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item @click="listenPage(item.id)" :label="item.title" v-for="item in pushList" :key="item.title">
                        <div class="medium view-shadow">
                            <el-image
                                    :src="picPath+item.pic2"
                                    fit="contain"></el-image>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <div class="text-bold text-15 margin-b"><span class="text-red view-radius-s" style="border: 3px solid #f44336;padding:0 5px;">{{ selType ? 'BEST':'NEW'}}</span><span class="margin-l">{{ selType?typeList[selType].groupName:'最新上架' }}</span></div>
                <div class="v-flex" style="flex-wrap: wrap;width: 100%;min-height: 616px;overflow-x: hidden;">
                    <div  @click="listenPage(item.id)" class="v-flex v-r-left" v-for="item in bookList" style="width: 245px;margin: 8px;">
                        <div style="width: 100px;height: 130px;">
                            <img :src="picPath+item.pic" width="100px" height="138px"/>
                        </div>
                        <div class="text-12 bookItem">
                            <div class="">{{item.title}}</div>
                            <div class=""><span class="text-gray">状态:</span>{{item.state==1?'完结':'连载'}}</div>
                            <div class=""><span class="text-gray">作者:</span>{{item.cname}}</div>
                            <div class="text-ellipsis-3 "><span class="text-gray">简介:</span>{{item.memo}}</div>
                            <div class=""><span class="text-gray">阅读:</span>{{item.hisNum}}</div>
                        </div>
                    </div>
                </div>
                <div class="v-flex v-r-center">
                    <div>
                        <span v-if="page!=1" class="padding-10 text-blue hover-green" @click="getBookList(-1)">上一页</span>
                        <span class="padding-10">{{page}}</span>
                        <span v-if="next" class="padding-10 text-blue hover-green" @click="getBookList(1)">下一页</span>
                    </div>

                </div>

            </div>
        </div>
        <div class="l-block-top" style="width: 338px;margin: 10px 5px;">

            <div class="bg-white margin-b padding-20" style="height: 95px;">
                <div v-if="!user" class="v-flex v-c-center v-r-center" style="height: 100%;">
                    <el-form label-position="left" label-width="60px" size="mini">
                        <el-form-item label="用户名">
                            <el-input
                                    size="mini"
                                    placeholder="请输入用户名"
                                    suffix-icon="el-icon-user"
                                    v-model="nick">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input
                                    size="mini"
                                    placeholder="请输入密码"
                                    suffix-icon="el-icon-set-up"
                                    type="password"
                                    v-model="pass">
                            </el-input>
                        </el-form-item>
                        <div class="v-flex v-r-center">
                            <div style="margin-right: 50px;">
                                <el-button size="mini" type="primary" @click="login">登录</el-button>
                            </div>
                            <el-button @click="resign" size="mini">注册</el-button>
                        </div>

                    </el-form>
                </div>

                <div v-if="user">
                    <div class="v-flex v-r-between padding-10">
                        <div class="v-flex v-r-left">
                            <el-avatar :src="'/NmBook/static/img/'+(user?'nuoMi.png':'unknow.png')"></el-avatar>
                            <div>
                                <div v-if="user" class="text-shadow text-blue" style="padding-left: 15px;">{{user.nickName}}</div>
                                <div v-if="user" class="text-shadow text-green text-12" style="padding-left: 15px;">{{ getUserType(user.type) }}</div>
                            </div>
                        </div>
                        <div style="line-height: 40px;">
                            <div v-if="user" @click="logOut" class="text-shadow text-red text-12" >退出登录</div>
                        </div>
                    </div>
                    <div class="v-flex v-r-between padding-10">
                        <div class="text-gray">关注<span class="padding-l text-yellow">{{userItem.allStar.length}}</span></div>
                        <div class="text-gray">收藏<span class="padding-l text-yellow">{{userItem.allCollect.length}}</span></div>
                        <div @click="jumpManager" class="text-blue">个人中心</div>
<!--                        <div v-if="user.type==3" @click="jumpManager" class="text-blue">阅读记录</div>-->
<!--                        <div v-if="user.type==2" @click="jumpManager" class="text-blue">作品管理</div>-->
<!--                        <div v-if="user.type==1" @click="jumpManager" class="text-blue">后台管理</div>-->
                    </div>
                </div>
            </div>
            <div class="bg-white" style="min-height: calc( 100vh - 160px );padding:10px;">
                <div class="text-bold text-15 margin-b"><span class="text-red view-radius-s" style="border: 3px solid #f44336;padding:0 5px;">HOT</span><span class="margin-l">最热小说</span></div>
                <div v-if="index<20" @click="listenPage(item.id)" class="border-b list-item" v-for="(item,index) in hotList" :kay="index" >
                    <div>
                        <i v-if="item.push==1" class="el-icon-star-on text-red text-middle"></i>
                        <i v-else class="el-icon-reading text-blue text-middle"></i>
                        <span :class=" item.push==1 ? 'text-red':'text-blue'">{{item.title}}</span>
                    </div>
                    <div><span class="text-10" :class=" item.push==1 ? 'text-red':'text-yellow'">{{ item.push==1 ?'糯米推荐' :(getTypeName(item.gid))}}</span></div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog title="用户注册" :visible.sync="showRe">
        <el-form>
            <el-form-item label="用户名" label-width="120px">
                <el-input v-model="reNick" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="120px">
                <el-input v-model="pass1" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重复密码" label-width="120px">
                <el-input v-model="pass2" type="password" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showRe = false">取 消</el-button>
            <el-button type="primary" @click="resignSub">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="意见" :visible.sync="showFed">
        <el-form label-position="top">
            <el-form-item  label="用户体验" label-width="120px">
                <el-rate v-model="fed[0]" ></el-rate>
            </el-form-item>
            <el-form-item label="资源数量" label-width="120px">
                <el-rate v-model="fed[1]" ></el-rate>
            </el-form-item>
            <el-form-item label="页面效果" label-width="120px">
                <el-rate v-model="fed[2]" ></el-rate>
            </el-form-item>
            <el-form-item label="听书音频" label-width="120px">
                <el-rate v-model="fed[3]" ></el-rate>
            </el-form-item>
            <el-form-item label="其他意见" label-width="120px">
                <el-input v-model="commentText" placeholder="请输入其他意见" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"  autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="commentText='';fed[0]=0;fed[1]=0;fed[2]=0;fed[3]=0;showFed = false;">跳 过</el-button>
            <el-button type="primary" @click="commentText='';fed[0]=0;fed[1]=0;fed[2]=0;fed[3]=0;showFed = false;">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script src="./component/vue/vue.js"></script>
<script src="./component/element-ui/index.js"></script>
<script src="./component/axios/axios.min.js"></script>
<script type="module">
    import common from "./component/common/commonData.js";

    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                user:false,
                showRe:false,
                showFed:false,
                fed:[0,0,0,0],
                userItem:{
                    allCollect:[],
                    allHis:[],
                    allStar:[],
                    allBook:[]
                },
                typeList:[],
                selType:0,
                hotList:[],
                bookList:[],
                title:"",
                dataView:{},
                tableData: [],
                userInfo:{},
                showMapSel:false,
                selObj:{},
                selName:"",
                activeIndex: '1',
                activeIndex2: '1',
                tabText:"",
                text:"",
                nick:"",
                pass:"",
                pushList:[],
                picPath:common.urlMap.getPic,
                reNick:'',
                pass1:"",
                pass2:"",
                commentText:'',
                page:1,
                limit:9,
                next:true
            };
        },
        mounted() {

        },
        methods: {
            onShow(){

            },onLoad(){
                this.text = "" ;
                this.getGroupList();
                this.getTopBar();
                this.user = common.getUserInfo();
                if(this.user){
                    this.getUserData();
                }
            },
            changeTab(index,item){
                this.selType = index;
                this.getBookList(0);
                if(item.groupName=='搞点黄色'){
                    alert("本站禁止色色，想什么呢 —————— 来自糯米的鄙视");
                }
            },getUserType(type){
                switch (type) {
                    case 1:
                        return "管理员";
                        break;
                    case 2:
                        return "作者";
                        break;
                    case 3:
                        return "读者";
                        break;
                }
            },getGroupList(){
                let _this = this;
                common.request({
                    data: {
                        validFlag:1
                    },
                    url: common.urlMap.findNmBookGroupList,
                    success: function(res) {
                        if(res.data.code == 200){
                            _this.typeList = res.data.data;
                            _this.typeList.unshift({groupName:"首页"});
                            _this.getBookList(0);
                            _this.getHotBookList();
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })
            },login(){
                if(this.nick == "" || this.pass == ""){
                    common.err("请填写用户ID和密码");
                    return;
                }
                let _this = this;
                common.request({
                    headers:{
                        'content-type': 'application/x-www-form-urlencoded',
                    },
                    data: {
                        nick:_this.nick,
                        pass:window.btoa(_this.pass)
                    },
                    url: common.urlMap.login,
                    success: function(res) {
                        if(res.data.code == 200){
                            try {
                                _this.user = res.data.data;
                                _this.getUserData();
                                localStorage.setItem('userInfo', JSON.stringify(res.data.data));
                                _this.getUserData();
                            } catch (e) {
                                _this.user = "";
                                localStorage.removeItem("userInfo");
                            }
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })

            },getUserData(){
                let _this = this;
                common.request({
                    loading:false,
                    url: common.urlMap.getUserData,
                    success: function(res) {
                        if(res.data.code == 200){
                            if(res.data.data){
                                _this.userItem = res.data.data;
                            }
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })
            },logOut(){
                localStorage.removeItem("userInfo");
                this.user = false;
                common.request({
                    url: common.urlMap.logout
                });
            },jumpManager(){
                location.href = "./view/manager/myInfo.html" ;
            },getTopBar(){
                let _this = this;
                common.request({
                    data: {
                        push:1,
                        validFlag:1
                    },
                    url: common.urlMap.findNmBookList,
                    success: function(res) {
                        if(res.data.code == 200){
                            _this.pushList = res.data.data;
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })
            },getHotBookList(){
                let _this = this;
                common.request({
                    data: {
                        validFlag:1,
                        title:this.title,
                        type:1
                    },
                    url: common.urlMap.findNmBookList,
                    success: function(res) {
                        if(res.data.code == 200){
                            _this.hotList = res.data.data.sort(function(a,b){
                                return b.push - a.push;
                            });
                        }else {
                            common.err(res.data.msg);
                        }
                    }
                })
            },getBookList(num){
                this.page = num == 0? 1:(this.page + num);
                this.next = true;
                let _this = this;
                let gid = this.typeList[this.selType].id;
                common.request({
                    data: {
                        gid:gid?gid:"",
                        validFlag:1,
                        title:this.title,
                        type:1,
                        page:this.page,
                        limit:this.limit
                    },
                    url: common.urlMap.findNmBookList,
                    success: function(res) {
                        if(res.data.code == 200){
                            if(res.data.data.length < _this.limit && _this.page >1){
                                common.msg("已是最后一页了");
                                _this.next = false;
                            }
                            if(res.data.data.length < _this.limit && _this.page == 1){
                                _this.next = false;
                            }

                            _this.bookList = res.data.data;
                            // if(!gid){
                            //     _this.hotList = _this.bookList.sort(function(a,b){
                            //         return b.push - a.push;
                            //     });
                            // }
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })
            },
            getTypeName(typeId){
                for(let i =0;i<this.typeList.length;i++){
                    if(this.typeList[i].id == typeId){
                        return this.typeList[i].groupName;
                    }
                }
                return "";
            },
            listenPage(id){
                window.location.href="./view/manager/bookItem.html?id="+id;
            },
            resign(){
                this.reNick = "";
                this.pass1 = "";
                this.pass2 = "";
                this.showRe = true;
            },resignSub(){
                this.reNick = this.reNick.replace(/\s/g,"");

                if(!this.reNick||!this.pass1||!this.pass2){
                    common.err("请填写完整");
                    return;
                }

                if(this.reNick.length<3||this.reNick.length>8){
                    common.err("用户名长度应为3-8位");
                    return;
                }
                var patt = new RegExp(/[a-zA-Z\u4e00-\u9fa5]+/);
                if(!patt.test(this.reNick)){
                    common.err("用户名至少应包含一个字母或者汉字");
                    return;
                }

                if(this.pass1!=this.pass2){
                    common.err("两次密码不一致");
                    return;
                }

                if(this.pass1.length >12 || this.pass1.length <6){
                    common.err("密码长度应为6-12位");
                    return;
                }
                var patt2 = new RegExp(/[a-zA-Z]+/);
                if(!patt2.test(this.pass1)){
                    common.err("密码必须包含字母");
                    return;
                }

                let data = {
                    nickName:this.reNick,
                    password:btoa(this.pass1),
                    validFlag:1,
                    type:3,
                    pic:'nuoMi.png'
                }
                let _this = this;
                let gid = this.typeList[this.selType].id;
                common.request({
                    headers:{
                        'content-type': 'application/x-www-form-urlencoded',
                    },
                    data:{data:JSON.stringify(data)} ,
                    url: common.urlMap.regist,
                    success: function(res) {
                        if(res.data.code == 200){
                            common.msg("注册成功，请登录");
                            _this.showRe = false;
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })

            }
        }
    })
    window.onpageshow = app.onShow();
    window.onload = app.onLoad();
    </script>
    <style>

        body{
            background-color: #f3f3f3;
        }
        .tab-item:hover{
            background-color: #3f80de;
        }
        .tab-item{
            padding: 15px;
            color: white;
        }
        .tab-sel{
            background-color: #3f80de;
        }
        .tab-list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background-color: #409EFF;
        }

        .top-bar{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
        }
        .top-logo{
            display: flex;
            align-items: center;
            font-size: 30px;
            color: #E6A23C;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }

        .bookItem{
            width: 140px;
            height: 138px;
            padding-left: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
        }

        .list-item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            height: 24px;
        }

        .el-carousel__item div {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .el-form-item--mini{
            margin-bottom: 10px !important;
        }

    </style>
</body>
</html>